<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <title>12.1React哲学-静态</title>
</head>

<body>
  <div id="root"></div>

  <!-- 加载 React。-->
  <script src="../js/react@16.development.js"></script>
  <script src="../js/react-dom@16.development.js"></script>
  <script src="../js/babel@6.min.js"></script>

  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">


    // 第一步：将设计好的 UI 划分为组件层级

    // 第二步：用 React 创建一个静态版本

    const PRODUCTS = [
      { category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football" },
      { category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball" },
      { category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball" },
      { category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch" },
      { category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5" },
      { category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7" }
    ];
    class ProductCategoryRow extends React.Component {
      render() {
        const category = this.props.category;
        return (
          <tr>
            <th colSpan="2">{category}</th>
          </tr>
        )
      }
    }

    class ProductRow extends React.Component {

      render() {
        const product = this.props.product;
        const name = product.stocked
          ? product.name
          : <span style={{ color: 'red' }}>{product.name}</span>;

        return (
          <tr>
            <td>{name}</td>
            <td>{product.price}</td>
          </tr>
        )
      }
    }

    class ProductTable extends React.Component {

      render() {
        let rows = []
        let lastCategory = null
        this.props.products.forEach((product) => {
          if (product.category !== lastCategory) {
            rows.push(
              <ProductCategoryRow
                category={product.category}
                key={product.category} />
            );
          }
          rows.push(
            <ProductRow product={product} key={product.name} />
          );
          lastCategory = product.category
        });

        return (
          <table>
            <thead>
              <tr>
                <th>Name</th>
                <th>Price</th>
              </tr>
            </thead>
            <tbody>{rows}</tbody>
          </table>
        );
      }
    }

    class SearchBar extends React.Component {

      render() {
        return (
          <form>
            <input type="text" placeholder="Search..." />
            <p>
              <input type="checkbox" />
              {''}
              Only show products in stock
            </p>
          </form>
        );
      }
    }


    class FilterableProductTable extends React.Component {

      render() {
        return (
          <div>
            <SearchBar />
            <ProductTable products={PRODUCTS} />
          </div>
        )
      }
    }


    const root = document.getElementById('root');

    ReactDOM.render(<FilterableProductTable />, root);


  </script>
</body>

</html>